<template>
    <div class="welcome">
        <div class="header">
            <span class="rect"></span>
            <span class="welcome-title">树轮成果管理-文章预览</span>
        </div>
        <div class="container">
            <div class="content">
                <div class="top">
                    <input type="search" class="search-input" placeholder="请输入成果信息" />
                    <button class="action-btn">查询</button>
                    <button class="action-btn">重置</button>
                </div>
                <div class="bottom">
                    <div class="left">
                        <div class="left-items">
                            <div class="article-img">
                                <img src="../assets/images/welcome/u1845.jpg" alt="img" />
                            </div>
                            <div class="article-msg">
                                <div class="article-title">树木年轮气候变化研究</div>
                                <div class="article-content">
                                    同位素是指具有相同质子数但中子数不同的核素，因此具有不同的质量数。在化学元素周期表中，同位素占据同一位置但具有不同的物理性质。稳定同位素是指那些在自然界中不会自发衰变的同位素，如氢的1H（氕）和2H（氘），氧的16O和17O、18O等
                                </div>
                                <div class="article-info">
                                    <span class="article-name">张同文</span>
                                    <span class="article-time">17分钟前</span>
                                </div>
                            </div>
                        </div>
                        <div class="left-items">
                            <div class="article-img">
                                <img src="../assets/images/welcome/u1845.jpg" alt="img" />
                            </div>
                            <div class="article-msg">
                                <div class="article-title">树木年轮气候变化研究</div>
                                <div class="article-content">
                                    同位素是指具有相同质子数但中子数不同的核素，因此具有不同的质量数。在化学元素周期表中，同位素占据同一位置但具有不同的物理性质。稳定同位素是指那些在自然界中不会自发衰变的同位素，如氢的1H（氕）和2H（氘），氧的16O和17O、18O等
                                </div>
                                <div class="article-info">
                                    <span class="article-name">张同文</span>
                                    <span class="article-time">17分钟前</span>
                                </div>
                            </div>
                        </div>
                        <div class="left-items">
                            <div class="article-img">
                                <img src="../assets/images/welcome/u1845.jpg" alt="img" />
                            </div>
                            <div class="article-msg">
                                <div class="article-title">树木年轮气候变化研究</div>
                                <div class="article-content">
                                    同位素是指具有相同质子数但中子数不同的核素，因此具有不同的质量数。在化学元素周期表中，同位素占据同一位置但具有不同的物理性质。稳定同位素是指那些在自然界中不会自发衰变的同位素，如氢的1H（氕）和2H（氘），氧的16O和17O、18O等
                                </div>
                                <div class="article-info">
                                    <span class="article-name">张同文</span>
                                    <span class="article-time">17分钟前</span>
                                </div>
                            </div>
                        </div>
                        <div class="left-items">
                            <div class="article-img">
                                <img src="../assets/images/welcome/u1845.jpg" alt="img" />
                            </div>
                            <div class="article-msg">
                                <div class="article-title">树木年轮气候变化研究</div>
                                <div class="article-content">
                                    同位素是指具有相同质子数但中子数不同的核素，因此具有不同的质量数。在化学元素周期表中，同位素占据同一位置但具有不同的物理性质。稳定同位素是指那些在自然界中不会自发衰变的同位素，如氢的1H（氕）和2H（氘），氧的16O和17O、18O等
                                </div>
                                <div class="article-info">
                                    <span class="article-name">张同文</span>
                                    <span class="article-time">17分钟前</span>
                                </div>
                            </div>
                        </div>
                        <div class="left-items">
                            <div class="article-img">
                                <img src="../assets/images/welcome/u1845.jpg" alt="img" />
                            </div>
                            <div class="article-msg">
                                <div class="article-title">树木年轮气候变化研究</div>
                                <div class="article-content">
                                    同位素是指具有相同质子数但中子数不同的核素，因此具有不同的质量数。在化学元素周期表中，同位素占据同一位置但具有不同的物理性质。稳定同位素是指那些在自然界中不会自发衰变的同位素，如氢的1H（氕）和2H（氘），氧的16O和17O、18O等
                                </div>
                                <div class="article-info">
                                    <span class="article-name">张同文</span>
                                    <span class="article-time">17分钟前</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="right">
                        <div class="right-container right-container1">
                            <div class="container-title">热搜产品</div>
                            <div class="container-content">
                                <div class="row">
                                    <div class="number-box">1</div>
                                    <div class="text-content">
                                        树木年轮稳定同位素揭示全球气候变迁
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="number-box">2</div>
                                    <div class="text-content">
                                        树木年轮稳定同位素揭示全球气候变迁
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="number-box">3</div>
                                    <div class="text-content">
                                        树木年轮稳定同位素揭示全球气候变迁
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="number-box number-box1">4</div>
                                    <div class="text-content">
                                        树木年轮稳定同位素揭示全球气候变迁
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="number-box number-box1">5</div>
                                    <div class="text-content">
                                        树木年轮稳定同位素揭示全球气候变迁
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="right-container right-container2">
                            <div class="container-title">热门关键词</div>
                            <div class="container-content">
                                <div class="row">
                                    <div class="box">气候变化</div>
                                    <div class="box">碳同位素</div>
                                    <div class="box">历史气候</div>
                                </div>
                                <div class="row">
                                    <div class="box">气候变化</div>
                                    <div class="box">碳同位素</div>
                                    <div class="box">历史气候</div>
                                </div>
                                <div class="row">
                                    <div class="box">气候变化</div>
                                    <div class="box">碳同位素</div>
                                    <div class="box">历史气候</div>
                                </div>
                            </div>
                        </div>
                        <div class="right-container right-container3">
                            <div class="container-title">
                                搜索历史
                                <button class="clearHistory">清除历史</button>
                            </div>
                            <div class="container-content">
                                <div class="row">
                                    <div class="search-content">生态环境</div>
                                    <div class="search-time">05-22 10:49</div>
                                </div>
                                <div class="row">
                                    <div class="search-content">生态环境</div>
                                    <div class="search-time">05-22 10:49</div>
                                </div>
                                <div class="row">
                                    <div class="search-content">生态环境</div>
                                    <div class="search-time">05-22 10:49</div>
                                </div>
                                <div class="row">
                                    <div class="search-content">生态环境</div>
                                    <div class="search-time">05-22 10:49</div>
                                </div>
                                <div class="row">
                                    <div class="search-content">生态环境</div>
                                    <div class="search-time">05-22 10:49</div>
                                </div>


                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
export default {};
</script>
<style lang="less" scoped>
.welcome {
    height: 100vh;
    width: 100vw;
    .header {
        height: 3%;
        width: 100%;
        border-bottom: 0.05rem solid rgb(226, 223, 223);
        .rect {
            margin-left: 2rem;
            width: 0.5rem;
            height: 0.8rem;
            border: 0.05rem solid black;
            display: inline-block;
        }
        .welcome-title {
            margin-left: 0.3rem;
            display: inline-block;
            color: rgb(12, 79, 141);
            font-size: 1.2rem;
            font-weight: bold;
        }
    }
    .container {
        height: 90%;
        width: 100%;
        .content {
            width: 97%;
            height: 100%;
            margin: 0.5rem 1.5rem 0 1.5rem;
            border: 0.05rem solid #e2dfdf;
            .top {
                height: 4%;
                width: 25%;
                margin: 0.5rem 2rem;
                border: 0.05rem solid #e2dfdf;
                display: flex;
                justify-content: space-between;
                align-items: center;
                gap: 1rem;

                .search-input {
                    flex: 1; /* 让搜索框占据剩余空间 */
                    padding: 8px 12px; /* 内边距 */
                    border: 1px solid #ccc; /* 边框 */
                    border-radius: 4px; /* 边框圆角 */
                }

                .action-btn {
                    padding: 8px 12px; /* 内边距 */
                    border: none; /* 无边框 */
                    background-color: #e2dfdf; /* 背景颜色 */
                    color: #333; /* 文字颜色 */
                    text-transform: uppercase; /* 文字大写 */
                    position: relative; /* 相对定位 */
                }
            }
            .bottom {
                height: 94%;
                width: 100%;
                border: 0.05rem solid #e2dfdf;
                display: flex;
                .left {
                    width: 80%;
                    height: 100%;
                    border: 0.05rem solid #e2dfdf;
                    margin-right: 2rem;
                    .left-items {
                        width: 100%;
                        height: 20%;
                        border: 0.05rem solid #e2dfdf;
                        display: flex;
                        align-items: center;
                        .article-img {
                            width: 10%;
                            height: 100%;
                            margin: 0 2rem;
                            img {
                                width: 100%; /* 头像宽度，可以根据需要调整 */
                                height: 100%; /* 头像高度，设置为与宽度相同 */
                                // border-radius: 50%; /* 将图片裁剪成圆形 */
                            }
                        }
                        .article-msg {
                            width: 90%;
                            height: 100%;
                            border: 0.05rem solid #e2dfdf;
                            margin-right: 2rem;
                            margin-left: 1rem;
                            .article-title {
                                font-size: 1.3rem;
                                font-weight: bold;
                                margin: 1rem 0;
                            }
                            .article-content {
                                color: #8b8484;
                            }
                            .article-info {
                                margin: 1rem 0;
                                display: flex;
                                flex-direction: row;
                                justify-content: space-between;
                                align-items: center;
                            }
                        }
                    }
                }
                .right {
                    width: 20%;
                    height: 100%;
                    border: 0.05rem solid #e2dfdf;
                    .right-container {
                        width: 100%;
                        border: 0.05rem solid #e2dfdf;
                        .container-title {
                            width: 96%;
                            height: 10%;
                            font-size: 1.2rem;
                            font-weight: bold;
                            margin: 1rem 0 1rem 1rem;
                            display: flex;
                            flex-direction: row;
                            justify-content: space-between;
                            align-items: center;
                            .clearHistory {
                                background: transparent;
                                border: 0;
                                font-size: 1rem;
                                margin-right: 1rem;
                                color: #8b8484;
                            }
                        }
                        .container-content {
                            width: 91%;
                            height: 78%;
                            margin: 0 1rem;
                            border: 0.05rem solid #e2dfdf;
                            display: flex; /* 启用Flexbox */
                            flex-direction: column; /* 子元素垂直排列 */
                        }
                    }
                    .right-container1 {
                        height: 30%;
                        margin-bottom: 1.5rem;
                        .row {
                            display: flex; /* 每行也使用Flexbox */
                            align-items: center; /* 垂直居中对齐 */
                            height: 20%;
                            // margin-bottom: 10px; /* 每行之间的间隔 */
                            .number-box {
                                width: 1.6rem;
                                height: 1.6rem;
                                background-color: #e6841a;
                                color: #f9f9f9;
                                display: flex;
                                align-items: center;
                                justify-content: center;
                                border-radius: 15%;
                                margin: 1rem;
                            }
                            .number-box1{
                                background-color:transparent;
                                color:#8b8484;
                                border: 0.05rem solid #8b8484;
                            }
                            .text-content {
                                font-size: 1rem; /* 字体大小 */
                                color: #333; /* 字体颜色 */
                            }
                        }
                    }
                    .right-container2 {
                        height: 25%;
                        margin-bottom: 1.5rem;
                        .row {
                            display: flex; /* 每行也使用Flexbox */
                            justify-content: center; /* 水平居中对齐 */
                            width: 100%; /* 占满容器宽度 */
                            margin-bottom: 10px; /* 每行之间的间隔 */
                            height: 25%;
                           
                            .box {
                                border: 0.05rem solid #e2dfdf;
                                color: #8b8484;
                                border-radius: 45%;
                                font-size: 1rem;
                                margin: 1rem;
                                text-align: center;
                                padding: 0.6rem;
                                height: 45%;
                            }
                        }
                    }
                    .right-container3 {
                        height: 40%;
                        .row {
                            display: flex;
                            align-items: center;
                            margin: 1rem;
                            justify-content: space-between;
                        }
                        .search-time{
                            color: #8b8484;
                        }
                    }
                }
            }
        }
    }
}
</style>
